<template>
  <div class="personal-main bg-gray-50 min-h-screen py-8 px-4">
    <div class="personal-pay max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
      <div class="bg-primary text-white p-6">
        <h3 class="text-xl font-semibold flex items-center">
          <i class="fa fa-money mr-2"></i>借款申请
        </h3>
      </div>

      <el-steps :active="active" finish-status="success" process-status="process" align-center
                class="py-8 px-4">
        <el-step title="提交借款信息" icon="el-icon-edit"></el-step>
        <el-step title="审核中" icon="el-icon-time"></el-step>
        <el-step title="审核结果" icon="el-icon-check"></el-step>
      </el-steps>

      <!-- 步骤1：借款信息表单 -->
      <div v-if="active === 0" class="p-6">
        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6 rounded-r">
          <p class="text-sm text-blue-700">
            <i class="fa fa-info-circle mr-1"></i>请填写以下信息完成借款申请，所有字段均为必填项。
          </p>
        </div>

        <el-form label-width="150px" class="max-w-2xl mx-auto">
          <el-form-item label="借款金额" prop="amount">
            <el-col :span="12">
              <el-input v-model.number="borrowInfo.amount" placeholder="请输入借款金额"
                        class="w-full">
                <template #append>元</template>
              </el-input>
            </el-col>
            <el-col :span="12" class="flex items-center text-sm text-gray-500">
              <i class="fa fa-info-circle mr-1"></i>
              您最多可借款 <span class="font-semibold text-primary">{{ borrowAmount }}</span> 元
            </el-col>
          </el-form-item>

          <el-form-item label="借款期限" prop="period">
            <el-select v-model.number="borrowInfo.period" placeholder="请选择借款期限"
                       class="w-1/2">
              <el-option v-for="item in periodOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="还款方式" prop="returnMethod">
            <el-select v-model="borrowInfo.returnMethod" placeholder="请选择还款方式"
                       class="w-1/2">
              <el-option v-for="item in returnMethodList" :key="item.value" :label="item.name"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="资金用途" prop="moneyUse">
            <el-select v-model="borrowInfo.moneyUse" placeholder="请选择资金用途"
                       class="w-1/2">
              <el-option v-for="item in moneyUseList" :key="item.value" :label="item.name"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="年利率" prop="borrowYearRate">
            <el-col :span="12">
              <el-input v-model.number="borrowInfo.borrowYearRate" placeholder="请输入年利率"
                        class="w-full">
                <template #append>%</template>
              </el-input>
            </el-col>
            <el-col :span="12" class="flex items-center text-sm text-gray-500">
              <i class="fa fa-info-circle mr-1"></i>
              年利率越高，借款越容易成功
            </el-col>
          </el-form-item>

          <el-form-item class="pt-4 flex justify-center">
            <el-button type="primary" size="large" :loading="submitLoading"
                       :disabled="submitBtnDisabled || !isFormValid"
                       class="px-8 py-2 rounded-lg bg-primary hover:bg-primary/90 transition-all"
                       @click="save">
              <i class="fa fa-paper-plane mr-2"></i>提交申请
            </el-button>
          </el-form-item>
        </el-form>

        <div class="mt-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
          <p class="text-sm text-gray-600 flex items-start">
            <i class="fa fa-shield text-green-500 mt-1 mr-2"></i>
            您提供的任何信息尚融宝都承诺予以保护，不会挪作他用。
          </p>
        </div>
      </div>

      <!-- 步骤2：审核中 -->
      <div v-if="active === 1" class="p-12 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-blue-100 rounded-full mb-6">
          <i class="fa fa-clock-o text-3xl text-blue-500"></i>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-3">申请已提交</h3>
        <p class="text-gray-600 mb-6">您的借款申请正在审核中，请耐心等待</p>
        <el-alert title="我们将在10分钟内完成审核，审核时间为周一至周五8:00至20:00。"
                  type="info" show-icon center :closable="false"
                  class="max-w-md mx-auto"></el-alert>
      </div>

      <!-- 步骤3：审核结果 -->
      <div v-if="active === 2" class="p-12 text-center">
        <div v-if="borrowInfoStatus === 2" class="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full mb-6">
          <i class="fa fa-check text-3xl text-green-500"></i>
        </div>
        <div v-if="borrowInfoStatus === -1" class="inline-flex items-center justify-center w-20 h-20 bg-red-100 rounded-full mb-6">
          <i class="fa fa-times text-3xl text-red-500"></i>
        </div>

        <h3 v-if="borrowInfoStatus === 2" class="text-xl font-semibold text-green-600 mb-3">申请已通过</h3>
        <h3 v-if="borrowInfoStatus === -1" class="text-xl font-semibold text-red-600 mb-3">申请未通过</h3>

        <p v-if="borrowInfoStatus === 2" class="text-gray-600 mb-6">您的借款申请已成功通过审核，资金将很快到账</p>
        <p v-if="borrowInfoStatus === -1" class="text-gray-600 mb-6">很遗憾，您的借款申请未能通过审核</p>

        <el-alert v-if="borrowInfoStatus === 2"
                  title="借款资金将在1个工作日内转入您的账户，请留意收款信息"
                  type="success" show-icon center :closable="false"
                  class="max-w-md mx-auto"></el-alert>

        <el-alert v-if="borrowInfoStatus === -1"
                  title="如有疑问，请联系客服咨询具体原因"
                  type="error" show-icon center :closable="false"
                  class="max-w-md mx-auto"></el-alert>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: null, // 当前步骤
      borrowInfoStatus: null, // 审批状态
      borrowInfo: {
        amount: null,
        period: 1,
        returnMethod: null,
        moneyUse: null,
        borrowYearRate: 12
      },
      borrowAmount: 0, // 借款额度
      submitBtnDisabled: false,
      submitLoading: false,
      returnMethodList: [], // 还款方式列表
      moneyUseList: [], // 资金用途列表
      // 借款期限选项
      periodOptions: [
        { value: 1, label: '1个月' },
        { value: 3, label: '3个月' },
        { value: 6, label: '6个月' },
        { value: 9, label: '9个月' },
        { value: 12, label: '12个月' },
        { value: 24, label: '24个月' }
      ]
    }
  },

  computed: {
    // 检查表单是否有效
    isFormValid() {
      return (
          this.borrowInfo.amount &&
          this.borrowInfo.period &&
          this.borrowInfo.returnMethod &&
          this.borrowInfo.moneyUse &&
          this.borrowInfo.borrowYearRate
      )
    }
  },

  watch: {
    // 监听借款金额变化，确保不超过最大额度
    'borrowInfo.amount'(value) {
      if (value > this.borrowAmount) {
        this.$alert('您的借款额度不足', {
          type: 'error',
          confirmButtonText: '确定',
          callback: () => {
            this.borrowInfo.amount = this.borrowAmount
          }
        })
      }
    }
  },

  created() {
    this.getBorrowInfoStatus()
  },

  methods: {
    // 获取借款状态
    getBorrowInfoStatus() {
      this.$axios
          .$get('/api/core/borrowInfo/auth/getBorrowInfoStatus')
          .then((response) => {
            this.borrowInfoStatus = response.data.borrowInfoStatus
            if (this.borrowInfoStatus === 0) {
              // 未认证，显示表单
              this.active = 0
              this.getBorrowAmount()
              this.initSelected()
            } else if (this.borrowInfoStatus === 1) {
              // 审批中
              this.active = 1
            } else if (this.borrowInfoStatus === 2) {
              // 审批成功
              this.active = 2
            } else if (this.borrowInfoStatus === -1) {
              // 审批失败
              this.active = 2
            }
          })
          .catch((error) => {
            console.error('获取借款状态失败:', error)
            this.$message.error('获取借款状态失败，请稍后重试')
          })
    },

    // 初始化下拉列表数据
    initSelected() {
      // 获取还款方式列表
      this.$axios
          .$get('/api/core/dict/findByDictCode/returnMethod')
          .then((response) => {
            this.returnMethodList = response.data.dictList
          })
          .catch((error) => {
            console.error('获取还款方式列表失败:', error)
            this.$message.error('获取还款方式列表失败，请稍后重试')
          })

      // 获取资金用途列表
      this.$axios
          .$get('/api/core/dict/findByDictCode/moneyUse')
          .then((response) => {
            this.moneyUseList = response.data.dictList
          })
          .catch((error) => {
            console.error('获取资金用途列表失败:', error)
            this.$message.error('获取资金用途列表失败，请稍后重试')
          })
    },

    // 获取借款额度
    getBorrowAmount() {
      this.$axios
          .$get('/api/core/borrowInfo/auth/getBorrowAmount')
          .then((response) => {
            this.borrowAmount = response.data.borrowAmount
          })
          .catch((error) => {
            console.error('获取借款额度失败:', error)
            this.$message.error('获取借款额度失败，请稍后重试')
          })
    },

    // 提交借款申请
    save() {
      if (!this.isFormValid) {
        this.$message.warning('请填写完整的借款信息')
        return
      }

      this.submitLoading = true
      this.$axios
          .$post('/api/core/borrowInfo/auth/save', this.borrowInfo)
          .then((response) => {
            this.active = 1
            this.$message.success('借款申请已提交成功')
          })
          .catch((error) => {
            console.error('提交借款申请失败:', error)
            this.$message.error('提交借款申请失败，请稍后重试')
          })
          .finally(() => {
            this.submitLoading = false
          })
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
.personal-main {
  font-family: 'Inter', sans-serif;
}

.bg-primary {
  background-color: #165DFF;
}

.text-primary {
  color: #165DFF;
}

/* 按钮动画效果 */
.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 输入框样式优化 */
.el-input__inner {
  border-radius: 4px;
  padding: 8px 12px;
  border-color: #E5E7EB;
}

.el-input__inner:focus {
  border-color: #165DFF;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
}

/* 步骤条样式优化 */
.el-steps {
  margin: 40px 0 !important;
}

.el-step__title {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-form-item__label {
    text-align: left !important;
  }

  .el-col {
    width: 100% !important;
    margin-bottom: 10px;
  }
}
</style>